<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form :form="form" style="height: 100%;">

          <rx-fit>
            <div slot="toolheader" foldbtn="false" border="false">
              <a-col :span="23">
                <a-form-item :labelCol="labelCol_a" :wrapperCol="wrapperCol" :label="i18n('form.shiftName','班次名称')">
                  <a-input :placeholder="i18n('form.shiftName','班次名称')"
                           v-decorator="['settingName', {rules: [{required: true, message: i18n('form.shiftName','班次名称','input')}]}]"/>
                </a-form-item>
              </a-col>

              <div style="padding: 4px 0 0px">
                <a-button type="primary"  @click="addRow">
                    {{$ti18('rxList.newBtn','添加')}}
                </a-button>
              </div>
            </div>
            <a-table :columns="columns" :dataSource="timeIntervalList" :pagination="false">
              <span slot="startTime" slot-scope="text, record,index">
                <a-time-picker :defaultValue="moment(text, 'HH:mm')" format="HH:mm"
                               @change="e => changTime(e,record,'startTime')"/>
              </span>
                <span slot="endTime" slot-scope="text, record,index">
                <a-time-picker :defaultValue="moment(text, 'HH:mm')" format="HH:mm"
                               @change="e => changTime(e,record,'endTime')"/>
              </span>
                <span slot="totalTime" slot-scope="text, record">
                {{text}}
              </span>
                <span slot="action" slot-scope="text, record,index">
                <a-icon @click="delVarRow(record,index)" style="cursor: pointer" :title="$ti18('rxList.delBtn','删除')" type="delete"/>
                  <!--<a-icon @click="upVarRow(record,index)" style="cursor: pointer" title="向上" type="up"/>-->
                  <!--<a-icon @click="downVarRow(record,index)" style="cursor: pointer" title="向下" type="down"/>-->
              </span>
            </a-table>
          </rx-fit>

        </a-form>
      </div>
    </rx-layout>

  </rx-dialog>
</template>
<script>
  import BpmCalTimeBlockApi from '@/api/bpm/core/bpmCalTimeBlock'
  import {BaseForm, RxDialog,RxLayout} from '@lowcode/jpaas-common-lib'
  import {swapArrItems} from '@/utils/util';
  export default {
    name: 'npm-caltime-block-edit',
    mixins: [BaseForm],
    components: {
      RxDialog,
      RxLayout
    },

    data() {
      return {
        labelCol_a: { span: 3 },
        timeIntervalList: [],
        columns: [
          {
            title: this.i18n('form.startTime','开始时间'),
            dataIndex: 'startTime',
            scopedSlots: {customRender: 'startTime'},
          },
          {
            title: this.i18n('form.endTime','结束时间'),
            dataIndex: 'endTime',
            scopedSlots: {customRender: 'endTime'},
          },
          {
            title: this.i18n('form.duration','时长（分钟）'),
            dataIndex: 'totalTime',
            scopedSlots: {customRender: 'totalTime'},
          },
          {
            title: this.$ti18('rxList.action','操作'),
            key: 'action',
            scopedSlots: {customRender: 'action'}
          }
        ]
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmCalTimeBlock",key);
        },
      onload_(data) {
        if (data && data.timeIntervals) {
          this.timeIntervalList = JSON.parse(data.timeIntervals);
        }
      },
      delVarRow(record, index) {
        this.timeIntervalList.splice(index, 1);
      },
      upVarRow(record, index) {
        swapArrItems(this.timeIntervalList, index, index - 1)
      },
      downVarRow(record, index) {
        swapArrItems(this.timeIntervalList, index, index + 1)
      },
      addRow() {
        this.timeIntervalList.push({
          startTime: '08:00',
          endTime: '12:00',
          totalTime: "240"
        })
      },
      changTime(val, record, type) {
        var startTime = record.startTime;
        var endTime = record.endTime;
        var hours = this.getTime(val.toDate().getHours());
        var minute = this.getTime(val.toDate().getMinutes());
        if ("startTime" == type) {
          startTime = hours + ":" + minute;
          record.startTime = startTime;
        } else {
          endTime = hours + ":" + minute;
          record.endTime = endTime;
        }
        var totalTime = this.countTime(startTime, endTime);
        record.totalTime = totalTime;
      },
      getTime(time) {
        return time < 10 ? "0" + time : time;
      },
      countTime(startTime, endTime) {
        var startTimeList = startTime.split(":");
        var endTimeList = endTime.split(":");
        var differHour = endTimeList[0] - startTimeList[0];
          if (startTime > endTime) {
              differHour += 24;
          }
        var differminute = endTimeList[1] - startTimeList[1];
        return differHour * 60 + differminute;
      },
      get(id) {
        return BpmCalTimeBlockApi.get(id);
      },
      save(values) {
        var timeIntervals = JSON.stringify(this.timeIntervalList);
        values.timeIntervals = timeIntervals;
        return BpmCalTimeBlockApi.save(values);
      }

    }
  }
</script>
<style scoped>

</style>